<template>
  <div class="qr-generator">
    <el-card title="生成入库二维码">
      <el-form :model="stockInForm" ref="stockInForm" :rules="rules" label-width="120px">
        <el-form-item label="领料单号" prop="requisitionId">
          <el-input v-model="stockInForm.requisitionId" placeholder="请输入领料单号"></el-input>
        </el-form-item>
        <el-form-item label="仓库ID" prop="warehouseId">
          <el-input v-model="stockInForm.warehouseId" type="number" placeholder="请输入仓库ID"></el-input>
        </el-form-item>
        <el-form-item label="商品ID" prop="productId">
          <el-input v-model="stockInForm.productId" type="number" placeholder="请输入商品ID"></el-input>
        </el-form-item>
        <el-form-item label="员工ID" prop="employeeId">
          <el-input v-model="stockInForm.employeeId" type="number" placeholder="请输入操作员工ID"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="num">
          <el-input v-model="stockInForm.num" type="number" min="1" placeholder="请输入入库数量"></el-input>
        </el-form-item>
        <el-form-item label="计量单位ID" prop="unitId">
          <el-input v-model="stockInForm.unitId" type="number" placeholder="请输入计量单位ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="generateQrCode">生成二维码</el-button>
        </el-form-item>
      </el-form>

      <!-- 生成的二维码 -->
      <div v-if="qrCodeContent" class="qr-code-container">
        <h3>入库信息二维码</h3>
        <qrcode-vue
            :value="qrCodeContent"
            :size="200"
            level="H"
        ></qrcode-vue>
        <p class="tips">使用入库终端扫描此二维码完成入库确认</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
import { ElMessage } from 'element-plus'

export default {
  components: { QrcodeVue },
  data() {
    return {
      stockInForm: {
        requisitionId: '', // 领料单号
        warehouseId: null, // 仓库ID
        productId: null,   // 商品ID
        employeeId: null,  // 员工ID
        num: null,         // 入库数量
        unitId: null       // 计量单位ID
      },
      qrCodeContent: '', // 二维码内容（JSON字符串）
      rules: {
        requisitionId: [{ required: true, message: '请输入领料单号', trigger: 'blur' }],
        warehouseId: [{ required: true, type: 'number', message: '请输入仓库ID', trigger: 'blur' }],
        productId: [{ required: true, type: 'number', message: '请输入商品ID', trigger: 'blur' }],
        employeeId: [{ required: true, type: 'number', message: '请输入员工ID', trigger: 'blur' }],
        num: [{ required: true, type: 'number', min: 1, message: '入库数量至少为1', trigger: 'blur' }],
        unitId: [{ required: true, type: 'number', message: '请输入计量单位ID', trigger: 'blur' }]
      }
    }
  },
  methods: {
    generateQrCode() {
      this.$refs.stockInForm.validate((valid) => {
        if (valid) {
          // 生成包含入库信息的JSON字符串（添加时间戳防重复）
          this.qrCodeContent = JSON.stringify({
            ...this.stockInForm,
            timestamp: new Date().getTime()
          })
          ElMessage.success('二维码生成成功')
        }
      })
    }
  }
}
</script>

<style scoped>
.qr-code-container {
  margin-top: 20px;
  text-align: center;
}
.tips {
  margin-top: 10px;
  color: #666;
}
</style>